<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="通勤找房"
      left-arrow
      @click-left="back"
    />
    <div v-show="houselist.length != 0" class="contentbox">
      <div
        @click="jumptodetail(item.roomId, item)"
        v-for="(item, index) in houselist"
        :key="index"
        class="house"
      >
        <img :src="item.image" />
        <div class="intrduce">
          <div class="title1">{{ item.subdistrict }}</div>
          <div class="title2">
            <span>{{ item.rentalWay }}</span
            >|<span>{{ item.houseType }}</span
            >|<span>{{ item.roomAcre }}m2</span>|<span>{{ item.floor }}</span>
          </div>
          <div class="title2">
            <van-icon name="location" size="14px" />{{ item.distance }}
          </div>
          <div class="tips">
            <span>{{ item.rentalWay }}</span>
            <span>{{ item.paymentMethod }}</span>
            <span>{{ item.houseType }}</span>
          </div>
          <div class="title3">
            {{ item.price }}
            <button @click.stop="tomap(item.lat, item.lng, item.subdistrict)">
              查看距离
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="houselist.length == 0" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>啊哦~当前区域暂无房源</div>
    </div>
    <van-action-sheet
      v-model="showmapapp"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="selectmap"
    />
  </div>
</template>

<script>
import { getHouselist } from "../../apis/house.js";
import local from "../../utils/local.js";
export default {
  data() {
    return {
      currentPage: 1,
      perPage: 10,
      houselist: [],
      loading: false,
      adcode: "",
      name: "",
      actions: [
        { name: "腾讯地图" },
        { name: "高德地图" },
        { name: "百度地图" },
      ],
      showmapapp: false,
      location: "",
      lat: "",
      lng: "",
      subdistrict: "",
      mapurl: "",
    };
  },
  created() {
    this.adcode = JSON.parse(local.get("commutedata")).adcode;
    this.name = JSON.parse(local.get("commutedata")).name;
    this.location = JSON.parse(local.get("commutedata")).location;
    this.getlist();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    tomap(lat, lng, name) {
      this.lat = lat;
      this.lng = lng;
      this.subdistrict = name;
      this.showmapapp = true;
    },
    selectmap(item) {
      let a = this.location;
      a = a.split(",");
      a = a.reverse();
      a = a.join(",");
      this.showmapapp = false;
      switch (item.name) {
        case "腾讯地图":
          this.mapurl =
            "https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=" +
            this.name +
            "&fromcoord=" +
            a +
            "&to=" +
            this.subdistrict +
            "&tocoord=" +
            this.lat +
            "," +
            this.lng;
          this.$router.push({ path: "/mapapp", query: { url: this.mapurl } });
          break;
        case "高德地图":
          this.mapurl =
            "https://uri.amap.com/navigation?from=" +
            this.location +
            "," +
            this.name +
            "&to=" +
            this.lng +
            "," +
            this.lat +
            "," +
            this.subdistrict;
          this.$router.push({ path: "/mapapp", query: { url: this.mapurl } });
          break;
        case "百度地图":
          this.mapurl =
            "http://api.map.baidu.com/direction?origin=name:" +
            this.name +
            "|latlng:" +
            a +
            "&destination=name:" +
            this.subdistrict +
            "|latlng:" +
            this.lat +
            "," +
            this.lng +
            "&mode=driving&region=" +
            local.get("city") +
            "&output=html";
          this.$router.push({ path: "/mapapp", query: { url: this.mapurl } });
          break;
        default:
          break;
      }
    },
    onCancel() {
      this.showmapapp = false;
    },
    async getlist() {
      await getHouselist({
        currentPage: this.currentPage,
        perPage: this.perPage,
        adcode: this.adcode,
      }).then((res) => {
        if (res.result.list.length == 10) {
          this.loading = true;
        }
        this.houselist = res.result.list;
      });
    },
    jumptodetail(e, item) {
      let list = JSON.parse(local.get("todayhouselist"));
      for (let i = 0; i < list.length; i++) {
        if (list[i].roomId == item.roomId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      local.set("todayhouselist", JSON.stringify(list));
      local.set("roomId", e);
      this.$router.push({ path: "/housedetail" });
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        getHouselist({
          currentPage: this.currentPage,
          perPage: this.perPage,
          adcode: this.adcode,
        }).then((res) => {
          if (res.result.list.length != 10) {
            this.loading = false;
          }
          this.houselist = [...this.houselist, ...res.result.list];
        });
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style lang="less" scoped>
.contentbox {
  margin: 0 15px;
  .house {
    display: flex;
    margin: 10px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          color: #45b7cb;
          border: 1px solid #45b7cb;
        }
      }
      .title3 {
        display: flex;
        justify-content: space-between;
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        button {
          font-size: 14px;
          color: #45b7cb;
          background-color: #fff;
          border: 1px solid #45b7cb;
          border-radius: 15px;
          padding: 3px 10px;
        }
      }
    }
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>